<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>约会活动 - 社交约会</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5; /* 主色调：深靛蓝 */
            --primary-light: #818cf8;
            --primary-dark: #3730a3;
            --secondary: #ec4899; /* 辅助色：粉色 */
            --accent: #f59e0b; /* 强调色：橙色 */
            --success: #10b981; /* 成功色：绿色 */
            --danger: #ef4444; /* 危险色：红色 */
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --bg-light: #f3f4f6;
            --bg-white: #ffffff;
            --border-light: #e5e7eb;
            --radius: 12px;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 55px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 55px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: var(--shadow);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .nav-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 1.2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-action:hover {
            background-color: var(--bg-light);
        }
        
        /* 搜索栏 */
        .search-container {
            padding: 12px 15px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 11px 15px 11px 40px;
            border-radius: 30px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 0.9rem;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 15px;
            top: 12px;
            color: var(--text-secondary);
        }
        
        /* 筛选工具栏 */
        .filter-toolbar {
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            padding-bottom: 8px;
        }
        
        /* 分类标签筛选 */
        .category-tabs {
            display: flex;
            padding: 0 15px;
            overflow-x: auto;
            scrollbar-width: none;
            padding-top: 8px;
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            flex: 0 0 auto;
            padding: 8px 16px;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-secondary);
            background: none;
            border: none;
            border-radius: 20px;
            margin-right: 8px;
            background-color: var(--bg-light);
        }
        
        .category-tab.active {
            color: var(--primary);
            background-color: rgba(79, 70, 229, 0.1);
        }
        
        /* 快捷筛选按钮组 */
        .quick-filters {
            display: flex;
            padding: 8px 15px 0;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .quick-filters::-webkit-scrollbar {
            display: none;
        }
        
        .quick-filter {
            flex: 0 0 auto;
            padding: 6px 12px;
            font-size: 0.8rem;
            background-color: var(--bg-light);
            border: 1px solid var(--border-light);
            border-radius: 4px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .quick-filter.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 筛选器切换按钮 */
        .filter-toggle {
            width: 100%;
            background-color: var(--bg-white);
            border: none;
            padding: 10px 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            border-bottom: 1px solid var(--border-light);
        }
        
        .filter-toggle i {
            transition: transform 0.3s ease;
        }
        
        .filter-toggle.collapsed i {
            transform: rotate(180deg);
        }
        
        /* 高级筛选面板 (默认折叠) */
        .advanced-filters {
            padding: 0 15px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            display: none;
        }
        
        .advanced-filters.show {
            display: block;
        }
        
        .filter-section {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .filter-section:last-child {
            border-bottom: none;
        }
        
        .filter-title {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-option {
            padding: 6px 12px;
            font-size: 0.8rem;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .filter-option.active {
            border-color: var(--primary);
            color: var(--primary);
            background-color: rgba(79, 70, 229, 0.1);
        }
        
        /* 筛选操作栏 */
        .filter-actions {
            display: flex;
            padding: 12px 15px;
            background-color: var(--bg-white);
            justify-content: space-between;
            border-bottom: 1px solid var(--border-light);
        }
        
        .reset-filters {
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .apply-filters {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 筛选结果提示 */
        .filter-results {
            padding: 10px 15px;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary-dark);
            font-size: 0.85rem;
            border-radius: var(--radius);
            margin: 0 15px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        
        .active-filter-tag {
            background-color: rgba(79, 70, 229, 0.2);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .clear-all-filters {
            font-size: 0.75rem;
            color: var(--primary-dark);
            background: none;
            border: none;
            text-decoration: underline;
        }
        
        /* 约会列表 */
        .dating-list {
            padding: 10px 15px;
        }
        
        /* 约会卡片样式 */
        .dating-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.2s ease;
        }
        
        .dating-card:hover {
            transform: translateY(-2px);
        }
        
        /* 无图约会卡片 */
        .dating-card.no-image .dating-content {
            padding: 15px;
        }
        
        /* 单图约会卡片 */
        .dating-card.single-image .media-container {
            height: 180px;
            position: relative;
        }
        
        /* 多图约会卡片 */
        .dating-card.multi-image .media-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
            aspect-ratio: 1/1;
        }
        
        .media-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
        }
        
        /* 约会信息 */
        .dating-content {
            padding: 15px;
        }
        
        .dating-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        
        .dating-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.3;
            max-width: 75%;
        }
        
        .dating-tag {
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
        }
        
        .tag-online {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .tag-popular {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .tag-new {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--accent);
        }
        
        .dating-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 10px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .dating-description {
            font-size: 0.9rem;
            line-height: 1.5;
            color: var(--text-secondary);
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .dating-host {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-light);
        }
        
        .host-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-light);
        }
        
        .host-info {
            flex: 1;
        }
        
        .host-name {
            font-weight: 500;
            font-size: 0.9rem;
            margin-bottom: 1px;
        }
        
        .participants {
            font-size: 0.75rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        /* 互动区域 */
        .dating-actions {
            display: flex;
            justify-content: space-between;
            padding: 10px 15px;
            border-top: 1px solid var(--border-light);
        }
        
        .action-button {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 500;
        }
        
        .primary-action {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        .secondary-action {
            background-color: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
        }
        
        /* 底部悬浮按钮 */
        .create-dating-btn {
            position: fixed;
            right: 20px;
            bottom: 80px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--secondary);
            color: white;
            border: none;
            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            z-index: 900;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.3rem;
            margin-bottom: 3px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 提示消息 */
        .toast-notification {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            z-index: 9999;
            font-size: 0.85rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast-notification.show {
            opacity: 1;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            margin: 10px 0 20px;
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            border-radius: var(--radius);
            color: var(--text-secondary);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 空状态 */
        .empty-state {
            padding: 50px 20px;
            text-align: center;
            color: var(--text-secondary);
        }
        
        .empty-state i {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: var(--border-light);
        }
        
        .empty-state p {
            margin-bottom: 25px;
            font-size: 0.95rem;
        }
        
        .empty-state button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 9px 20px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-action" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">约会活动</div>
        <button class="nav-action" id="notificationBtn">
            <i class="far fa-bell"></i>
        </button>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索约会活动、地点或发起人...">
        </div>
    </div>
    
    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
        <!-- 分类标签筛选 -->
        <div class="category-tabs">
            <button class="category-tab active">全部活动</button>
            <button class="category-tab">美食聚餐</button>
            <button class="category-tab">电影观影</button>
            <button class="category-tab">户外运动</button>
            <button class="category-tab">文化艺术</button>
            <button class="category-tab">咖啡小聚</button>
            <button class="category-tab">主题派对</button>
        </div>
        
        <!-- 快捷筛选按钮组 -->
        <div class="quick-filters">
            <button class="quick-filter active">
                <i class="fas fa-clock"></i>
                <span>最近</span>
            </button>
            <button class="quick-filter">
                <i class="fas fa-map-marker-alt"></i>
                <span>附近</span>
            </button>
            <button class="quick-filter">
                <i class="fas fa-camera"></i>
                <span>有图</span>
            </button>
            <button class="quick-filter">
                <i class="fas fa-fire"></i>
                <span>热门</span>
            </button>
        </div>
    </div>
    
    <!-- 筛选器切换按钮 -->
    <button class="filter-toggle collapsed" id="filterToggle">
        <span>更多筛选</span>
        <i class="fas fa-chevron-down"></i>
    </button>
    
    <!-- 高级筛选面板 -->
    <div class="advanced-filters" id="advancedFilters">
        <!-- 活动时间筛选 -->
        <div class="filter-section">
            <div class="filter-title">活动时间</div>
            <div class="filter-options">
                <button class="filter-option active">全部时间</button>
                <button class="filter-option">今天</button>
                <button class="filter-option">明天</button>
                <button class="filter-option">周末</button>
                <button class="filter-option">下周</button>
                <button class="filter-option">自定义</button>
            </div>
        </div>
        
        <!-- 参与人数筛选 -->
        <div class="filter-section">
            <div class="filter-title">参与人数</div>
            <div class="filter-options">
                <button class="filter-option active">不限</button>
                <button class="filter-option">2-5人</button>
                <button class="filter-option">6-10人</button>
                <button class="filter-option">10人以上</button>
            </div>
        </div>
        
        <!-- 活动费用筛选 -->
        <div class="filter-section">
            <div class="filter-title">活动费用</div>
            <div class="filter-options">
                <button class="filter-option active">全部</button>
                <button class="filter-option">免费</button>
                <button class="filter-option">AA制</button>
                <button class="filter-option">发起人请客</button>
                <button class="filter-option">费用分摊</button>
            </div>
        </div>
        
        <!-- 距离范围筛选 -->
        <div class="filter-section">
            <div class="filter-title">距离范围</div>
            <div class="filter-options">
                <button class="filter-option active">不限</button>
                <button class="filter-option">1公里内</button>
                <button class="filter-option">3公里内</button>
                <button class="filter-option">5公里内</button>
                <button class="filter-option">10公里内</button>
            </div>
        </div>
    </div>
    
    <!-- 筛选操作栏 -->
    <div class="filter-actions">
        <button class="reset-filters">
            <i class="fas fa-redo-alt"></i>
            <span>重置筛选</span>
        </button>
        <button class="apply-filters">
            <span>应用筛选</span>
            <i class="fas fa-check"></i>
        </button>
    </div>
    
    <!-- 筛选结果提示 -->
    <div class="filter-results">
        <div class="active-filters">
            <div class="active-filter-tag">
                最近
                <button class="filter-tag-remove"><i class="fas fa-times"></i></button>
            </div>
        </div>
        <button class="clear-all-filters">清除全部</button>
    </div>
    
    <!-- 约会列表 -->
    <div class="dating-list" id="datingList">
        <!-- 多图约会卡片 -->
        <div class="dating-card multi-image">
            <div class="media-container">
                <img src="https://picsum.photos/id/292/400/400" alt="户外野餐">
                <img src="https://picsum.photos/id/431/400/400" alt="美食分享">
                <img src="https://picsum.photos/id/493/400/400" alt="活动场景">
            </div>
            
            <div class="dating-content">
                <div class="dating-header">
                    <h3 class="dating-title">周末中央公园野餐聚会</h3>
                    <span class="dating-tag tag-popular">热门</span>
                </div>
                
                <div class="dating-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周六 14:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>中央公园</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-money-bill-wave"></i>
                        <span>AA制</span>
                    </div>
                </div>
                
                <p class="dating-description">
                    周末一起去中央公园野餐吧！带上你最喜欢的美食和饮料，我们可以一起聊天、游戏、享受阳光。目前已有5人参加，欢迎加入！
                </p>
                
                <div class="dating-host">
                    <img src="https://picsum.photos/id/64/100/100" alt="发起人头像" class="host-avatar">
                    <div class="host-info">
                        <div class="host-name">阳光女孩</div>
                        <div class="participants">
                            <i class="fas fa-users"></i>
                            <span>已有8人报名</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="dating-actions">
                <button class="action-button secondary-action share-btn">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
                <button class="action-button primary-action join-btn">
                    <i class="fas fa-user-plus"></i>
                    <span>报名参加</span>
                </button>
            </div>
        </div>
        
        <!-- 单图约会卡片 -->
        <div class="dating-card single-image">
            <div class="media-container">
                <img src="https://picsum.photos/id/225/800/400" alt="电影放映会">
                <div class="image-count">1/1</div>
            </div>
            
            <div class="dating-content">
                <div class="dating-header">
                    <h3 class="dating-title">经典电影放映会：《肖申克的救赎》</h3>
                    <span class="dating-tag tag-new">新活动</span>
                </div>
                
                <div class="dating-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周五 19:30</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>光影咖啡馆</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-money-bill-wave"></i>
                        <span>35元/人</span>
                    </div>
                </div>
                
                <p class="dating-description">
                    本周光影咖啡馆将放映经典电影《肖申克的救赎》，提供免费咖啡和小点心。适合喜欢经典电影的朋友一起观看讨论，限15人参加。
                </p>
                
                <div class="dating-host">
                    <img src="https://picsum.photos/id/91/100/100" alt="发起人头像" class="host-avatar">
                    <div class="host-info">
                        <div class="host-name">电影迷</div>
                        <div class="participants">
                            <i class="fas fa-users"></i>
                            <span>已有10人报名</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="dating-actions">
                <button class="action-button secondary-action share-btn">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
                <button class="action-button primary-action join-btn">
                    <i class="fas fa-user-plus"></i>
                    <span>报名参加</span>
                </button>
            </div>
        </div>
        
        <!-- 无图约会卡片 -->
        <div class="dating-card no-image">
            <div class="dating-content">
                <div class="dating-header">
                    <h3 class="dating-title">读书会：讨论《人类简史》</h3>
                    <span class="dating-tag tag-online">线上活动</span>
                </div>
                
                <div class="dating-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周日 20:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-video"></i>
                        <span>Zoom会议</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-money-bill-wave"></i>
                        <span>免费</span>
                    </div>
                </div>
                
                <p class="dating-description">
                    线上读书会，一起讨论尤瓦尔·赫拉利的《人类简史》。无论你是否读完，只要对历史和人类发展感兴趣，都欢迎参加我们的讨论。
                </p>
                
                <div class="dating-host">
                    <img src="https://picsum.photos/id/26/100/100" alt="发起人头像" class="host-avatar">
                    <div class="host-info">
                        <div class="host-name">书虫</div>
                        <div class="participants">
                            <i class="fas fa-users"></i>
                            <span>已有6人报名</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="dating-actions">
                <button class="action-button secondary-action share-btn">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
                <button class="action-button primary-action join-btn">
                    <i class="fas fa-user-plus"></i>
                    <span>报名参加</span>
                </button>
            </div>
        </div>
        
        <!-- 双图约会卡片 -->
        <div class="dating-card multi-image">
            <div class="media-container">
                <img src="https://picsum.photos/id/315/400/400" alt="徒步路线">
                <img src="https://picsum.photos/id/325/400/400" alt="山顶风景">
                <!-- 第三格留空，模拟只有两张图的情况 -->
                <div style="background-color: #f9f9f9;"></div>
            </div>
            
            <div class="dating-content">
                <div class="dating-header">
                    <h3 class="dating-title">周日郊外徒步：探寻瀑布美景</h3>
                    <span class="dating-tag tag-popular">热门</span>
                </div>
                
                <div class="dating-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周日 8:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>青峰山</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-money-bill-wave"></i>
                        <span>50元/人</span>
                    </div>
                </div>
                
                <p class="dating-description">
                    周日一起去青峰山徒步，路线难度适中，适合新手。终点有美丽的瀑布，我们可以在那里野餐休息。请穿舒适的鞋子，带足够的水。
                </p>
                
                <div class="dating-host">
                    <img src="https://picsum.photos/id/22/100/100" alt="发起人头像" class="host-avatar">
                    <div class="host-info">
                        <div class="host-name">山野爱好者</div>
                        <div class="participants">
                            <i class="fas fa-users"></i>
                            <span>已有12人报名</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="dating-actions">
                <button class="action-button secondary-action share-btn">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
                <button class="action-button primary-action join-btn">
                    <i class="fas fa-user-plus"></i>
                    <span>报名参加</span>
                </button>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <button class="load-more" id="loadMore">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多活动</span>
        </button>
    </div>
    
    <!-- 创建约会按钮 -->
    <button class="create-dating-btn" id="createDatingBtn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-calendar-alt"></i>
            <span>约会</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comments"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="far fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 提示消息
        function showToast(message) {
            let toast = document.querySelector('.toast-notification');
            if (toast) {
                toast.remove();
            }
            
            toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);
            
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 2500);
        }
        
        // 搜索功能
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && this.value.trim() !== '') {
                showToast(`搜索: ${this.value.trim()}`);
                
                // 模拟搜索加载
                simulateLoading();
            }
        });
        
        // 高级筛选面板切换
        const filterToggle = document.getElementById('filterToggle');
        const advancedFilters = document.getElementById('advancedFilters');
        
        filterToggle.addEventListener('click', () => {
            advancedFilters.classList.toggle('show');
            filterToggle.classList.toggle('collapsed');
        });
        
        // 分类标签切换
        const categoryTabs = document.querySelectorAll('.category-tab');
        categoryTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                categoryTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                showToast(`已选择: ${tab.textContent}`);
                
                // 模拟筛选加载
                simulateLoading();
            });
        });
        
        // 快捷筛选按钮
        const quickFilters = document.querySelectorAll('.quick-filter');
        quickFilters.forEach(filter => {
            filter.addEventListener('click', () => {
                filter.classList.toggle('active');
                showToast(filter.classList.contains('active') ? 
                    `已筛选: ${filter.querySelector('span').textContent}` : 
                    `已取消: ${filter.querySelector('span').textContent}`);
                
                // 模拟筛选加载
                simulateLoading();
            });
        });
        
        // 高级筛选选项
        const filterOptions = document.querySelectorAll('.filter-option');
        filterOptions.forEach(option => {
            option.addEventListener('click', function() {
                // 同组内互斥选择
                const parentGroup = this.closest('.filter-options');
                parentGroup.querySelectorAll('.filter-option').forEach(opt => {
                    opt.classList.remove('active');
                });
                
                this.classList.add('active');
                
                showToast(`已选择: ${this.textContent}`);
            });
        });
        
        // 应用筛选按钮
        document.querySelector('.apply-filters').addEventListener('click', () => {
            showToast('筛选条件已应用');
            
            // 收起筛选面板
            advancedFilters.classList.remove('show');
            filterToggle.classList.add('collapsed');
            
            // 模拟筛选加载
            simulateLoading();
        });
        
        // 重置筛选按钮
        document.querySelector('.reset-filters').addEventListener('click', () => {
            // 重置所有筛选选项
            filterOptions.forEach(option => {
                option.classList.remove('active');
            });
            
            // 选中第一个选项
            document.querySelectorAll('.filter-options').forEach(group => {
                group.querySelector('.filter-option:first-child').classList.add('active');
            });
            
            showToast('已重置所有筛选条件');
        });
        
        // 清除单个筛选标签
        document.querySelectorAll('.filter-tag-remove').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                this.closest('.active-filter-tag').remove();
                
                // 如果没有活跃筛选标签，隐藏整个筛选结果条
                if (document.querySelectorAll('.active-filter-tag').length === 0) {
                    document.querySelector('.filter-results').style.display = 'none';
                }
                
                showToast('已取消该筛选条件');
                simulateLoading();
            });
        });
        
        // 清除全部筛选
        document.querySelector('.clear-all-filters').addEventListener('click', () => {
            document.querySelectorAll('.active-filter-tag').forEach(tag => {
                tag.remove();
            });
            
            document.querySelector('.filter-results').style.display = 'none';
            
            // 重置所有筛选选项
            filterOptions.forEach(option => {
                option.classList.remove('active');
            });
            
            document.querySelectorAll('.filter-options').forEach(group => {
                group.querySelector('.filter-option:first-child').classList.add('active');
            });
            
            categoryTabs.forEach(t => t.classList.remove('active'));
            categoryTabs[0].classList.add('active');
            
            quickFilters.forEach(f => f.classList.remove('active'));
            quickFilters[0].classList.add('active');
            
            showToast('已清除所有筛选条件');
            simulateLoading();
        });
        
        // 模拟加载状态
        function simulateLoading() {
            const datingList = document.getElementById('datingList');
            const originalContent = datingList.innerHTML;
            
            datingList.innerHTML = `
                <div class="d-flex justify-content-center p-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            `;
            
            setTimeout(() => {
                datingList.innerHTML = originalContent;
                bindDatingEvents();
            }, 800);
        }
        
        // 绑定约会卡片事件
        function bindDatingEvents() {
            // 报名参加按钮
            document.querySelectorAll('.join-btn:not([data-bound])').forEach(btn => {
                btn.setAttribute('data-bound', 'true');
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const datingTitle = this.closest('.dating-card').querySelector('.dating-title').textContent;
                    
                    if (this.innerHTML.includes('已报名')) {
                        this.innerHTML = '<i class="fas fa-user-plus"></i><span>报名参加</span>';
                        showToast(`已取消报名 "${datingTitle}"`);
                        
                        // 更新参与人数
                        const participantsElem = this.closest('.dating-card').querySelector('.participants span');
                        const currentCount = parseInt(participantsElem.textContent.match(/\d+/)[0]);
                        participantsElem.textContent = `已有${currentCount - 1}人报名`;
                    } else {
                        this.innerHTML = '<i class="fas fa-check"></i><span>已报名</span>';
                        showToast(`成功报名 "${datingTitle}"`);
                        
                        // 更新参与人数
                        const participantsElem = this.closest('.dating-card').querySelector('.participants span');
                        const currentCount = parseInt(participantsElem.textContent.match(/\d+/)[0]);
                        participantsElem.textContent = `已有${currentCount + 1}人报名`;
                    }
                });
            });
            
            // 分享按钮
            document.querySelectorAll('.share-btn:not([data-bound])').forEach(btn => {
                btn.setAttribute('data-bound', 'true');
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const datingTitle = this.closest('.dating-card').querySelector('.dating-title').textContent;
                    showToast(`已分享 "${datingTitle}"`);
                });
            });
            
            // 卡片点击进入详情
            document.querySelectorAll('.dating-card:not([data-bound])').forEach(card => {
                card.setAttribute('data-bound', 'true');
                card.addEventListener('click', function() {
                    const datingTitle = this.querySelector('.dating-title').textContent;
                    showToast(`查看 "${datingTitle}" 的详情`);
                });
            });
        }
        
        // 加载更多
        document.getElementById('loadMore').addEventListener('click', function() {
            const btn = this;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>加载中...</span>';
            btn.disabled = true;
            
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.disabled = false;
                showToast('已加载更多约会活动');
                
                // 复制并修改卡片添加到列表
                const datingList = document.getElementById('datingList');
                const firstCard = datingList.querySelector('.dating-card:first-of-type');
                
                if (firstCard) {
                    const clone = firstCard.cloneNode(true);
                    const randomId = Math.floor(Math.random() * 300) + 100;
                    clone.querySelector('.host-avatar').src = `https://picsum.photos/id/${randomId}/100/100`;
                    
                    // 随机更改日期
                    const days = ['今天', '明天', '周六', '周日', '下周一'];
                    const times = ['9:00', '14:00', '16:30', '19:00', '20:30'];
                    const randomDay = days[Math.floor(Math.random() * days.length)];
                    const randomTime = times[Math.floor(Math.random() * times.length)];
                    
                    clone.querySelector('.meta-item:first-child span').textContent = `${randomDay} ${randomTime}`;
                    
                    datingList.insertBefore(clone, btn);
                    bindDatingEvents();
                }
            }, 1500);
        });
        
        // 创建约会按钮
        document.getElementById('createDatingBtn').addEventListener('click', () => {
            showToast('创建新约会活动');
        });
        
        // 返回按钮
        document.getElementById('backBtn').addEventListener('click', () => {
            showToast('返回上一页');
        });
        
        // 通知按钮
        document.getElementById('notificationBtn').addEventListener('click', () => {
            showToast('查看通知');
        });
        
        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', () => {
            bindDatingEvents();
        });
    </script>
</body>
</html>

